<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>登录</title>
		<style type="text/css">
			body {
				margin: 0px;
				padding: 0px;
				background-image: url(HTML/images/2-2.gif);
			}
		</style>
	</head>
	
	<style type="text/css">
		.input1 {
			background: none;
			border: 1px dashed #00CCFF;
			color: red;
		}
		
		.input2 {
			background: none;
			border: 1px dashed red;
			color: red;
		}
	</style>

	<body>
		<div align="center" id="app">
			<div style="margin-top:20%;padding-bottom:5px;color:#00CCFF;">
				<font size="6">
					<strong>用户登录</strong>
				</font>
			</div>
			<div align="center" style="color:#00CCFF;width:320px;height:198px;background-image:url(HTML/images/2-1.gif);">
				<form name="f1" style="height:198px;width:320px;border:0px" >
					<fieldset style="width: 300px;height:150px;padding-top:20px;border:0px">
						<table width="283" border="0" cellspacing="0" cellpadding="0">
							<tr style="">
								<td width="99" height="30" align="right" valign="middle"> 用户名： </td>
								<td width="186" align="left" valign="middle">

									<input class="input1" type="text" v-model="user_name" />
									<span id="userspan"></span>

								</td>
							</tr>
							<tr>
								<td height="35" align="right" valign="middle"> 密码： </td>
								<td align="left" valign="middle">

									<input class="input1" type="password" v-model="pass_word" @keyup.enter="login()" />
									<span id="pwdspan"></span>

								</td>
							</tr>
							<td height="30" colspan="2" align="center" valign="middle" style="padding-left:20px">
								<input type="button" value="登录" @click="login()" style="background:none;border:1px solid #00CCFF"> &nbsp;&nbsp;&nbsp;
								<input type="reset" value="取消" style="background:none;border:1px solid #00CCFF"></td>
							</tr>
						</table>
					</fieldset>
				</form>
			</div>
		</div>
		
		<script src="HTML/js/vue.js"></script>
		<script src="HTML/js/axios.js"></script>
		<script>
			axios.defaults.baseURL = "http://localhost:80"
			const app = new Vue({
				el: '#app',
				data: {
					user_name: '',
					pass_word: ''
				},
				methods: {
					login(){
						axios.post("/login",{
							user_name: this.user_name,
							pass_word: this.pass_word
						}).then(result => {
							console.log(result)
							if(result.data.status == 200){
								window.sessionStorage.setItem("token",result.data.data),
								alert("登录成功")
								window.location.href="HTML/main.html"
							}
							else{
								alert("登录失败")
							}
						})
					}
				}
			})
		</script>
	</body>
</html>